<nav class="navbar navbar-pf-vertical" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle visible-xs" ng-click="toggleMobileNav()" on-esc="closeMobileNav()">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <!-- JS click handler for #openshift-logo -->
    <a class="navbar-brand" id="openshift-logo" href="./catalog">
      <div id="header-logo"></div>
    </a>
  </div>
  <div class="nav contextselector-pf hidden-xs hidden-sm" ng-show="clusterConsoleURL">
    <select class="selectpicker contextselector">
      <option value="catalog">Service Catalog</option>
      <option value="application-console">Application Console</option>
      <option value="cluster-console">Cluster Console</option>
    </select>
  </div>
  <navbar-utility></navbar-utility>
</nav>

<div ng-show="view.hasProject" class="project-bar">
  <div class="toggle-menu">
    <button type="button" class="navbar-toggle project-action-btn" ng-click="toggleNav()">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  </div>
  <div class="form-group">
    <!-- Use title="" to prevent "Nothing selected" from briefly flashing while the projects are still loading. -->
    <select class="selectpicker project-picker form-control" id="boostrapSelect" title=""></select>
  </div>
  <catalog-search ng-if="canIAddToProject" catalog-items="catalogItems" base-project-url="project" toggle-at-mobile="true" search-toggle-callback="onSearchToggle"></catalog-search>
  <!-- create buttons show at mobile -->
  <div class="dropdown add-to-project" ng-if="canIAddToProject" uib-dropdown>
    <button class="dropdown-toggle btn btn-link" ng-disabled="currentProject.status.phase != 'Active'" title="Add to Project" uib-dropdown-toggle>
      <i class="fa fa-plus visible-xs-inline-block" aria-hidden="true" title="Add to Project"></i>
      <span class="hidden-xs">Add to Project</span>
      <span class="hidden-xs caret" aria-hidden="true" title="Add to Project"></span>
    </button>
    <ul role="menu" uib-dropdown-menu class="dropdown-menu dropdown-menu-right">
      <li ng-if-start="!catalogLandingPageEnabled" role="menuitem"><a ng-href="project/{{currentProjectName}}/create?tab=fromCatalog">Browse Catalog</a></li>
      <li role="menuitem"><a ng-href="project/{{currentProjectName}}/create?tab=deployImage">Deploy Image</a></li>
      <li ng-if-end role="menuitem"><a ng-href="project/{{currentProjectName}}/create?tab=fromFile">Import YAML / JSON</a></li>

      <li ng-if-start="catalogLandingPageEnabled" role="menuitem"><a href="{{currentProjectName | catalogURL}}">Browse Catalog</a></li>
      <li role="menuitem"><a href="" ng-click="showOrderingPanel('deployImage')">Deploy Image</a></li>
      <li ng-if-end role="menuitem"><a href="" ng-click="showOrderingPanel('fromFile')">Import YAML / JSON</a></li>
      <li role="menuitem"><a href="" ng-click="showOrderingPanel('fromProject')">Select from Project</a></li>
    </ul>
  </div>
</div> <!-- /project-bar -->

<sidebar></sidebar>

<overlay-panel show-panel="orderingPanelVisible" handle-close="closeOrderingPanel">
  <deploy-image-dialog ng-if="orderKind === 'deployImage'" project="currentProject" context="context" on-dialog-closed="closeOrderingPanel"></deploy-image-dialog>
  <from-file-dialog ng-if="orderKind === 'fromFile'" project="currentProject" context="context" on-dialog-closed="closeOrderingPanel"></from-file-dialog>
  <process-template-dialog ng-if="orderKind === 'fromProject'" project="currentProject" use-project-template="true" on-dialog-closed="closeOrderingPanel"></process-template-dialog>
  <process-template-dialog ng-if="orderKind === 'Template'" project="currentProject" template="selectedItem" on-dialog-closed="closeOrderingPanel"></process-template-dialog>
  <order-service ng-if="orderKind === 'ClusterServiceClass'" add-to-project="currentProject" base-project-url="project" service-class="selectedItem" service-plans="servicePlansForItem" handle-close="closeOrderingPanel"></order-service>
  <create-from-builder ng-if="orderKind === 'ImageStream'" add-to-project="currentProject" base-project-url="project" image-stream="selectedItem" handle-close="closeOrderingPanel"></create-from-builder>
</overlay-panel>
